<template>
  <div class="containter">
    <div
      class="basicInfo"
      v-loading="loading"
    >
      <h2>{{comInfo.qymc}}-{{year}}年度报告</h2>
      <div class="date">
        <span>公示日期：{{jcxx.publishdate}}</span>
        <div>
          <span class="demonstration">年份：</span>
          <el-select
            v-model="year"
            :placeholder="yearOptions.length > 0 ? '请选择' : '暂无数据'"
            @change='onload'
          >
            <el-option
              v-for="item in yearOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <el-tabs v-model="active">
        <el-tab-pane
          label="基础信息"
          name="first"
        >
          <table class="table">
            <tr>
              <th>企业名称</th>
              <td>{{jcxx.qymc}}</td>
              <th>{{handelCode(jcxx.shtyxydm)}}</th>
              <td>{{jcxx.shtyxydm}}</td>
            </tr>
            <tr>
              <th>联系电话</th>
              <td>{{jcxx.tel}}</td>
              <th>邮编</th>
              <td>{{jcxx.postalcode}}</td>
            </tr>
            <tr>
              <th>地址</th>
              <td colspan="3">{{jcxx.addr}}</td>
            </tr>
            <tr>
              <th>邮箱</th>
              <td>{{jcxx.email}}</td>
              <th>企业经营状态</th>
              <td>{{jcxx.busstCn}}</td>
            </tr>
            <tr>
              <th>是否有股权转让</th>
              <td>{{jcxx.hasstocktransfer}}</td>
              <th>是否有网站或网店</th>
              <td>{{jcxx.haswebsite}}</td>
            </tr>
            <tr>
              <th>是否有对外投资</th>
              <td>{{jcxx.hasinvestment}}</td>
              <th>是否对外提供担保保证</th>
              <td>{{jcxx.hasprovideassurance}}</td>
            </tr>
          </table>
        </el-tab-pane>
      </el-tabs>
      <el-tabs v-model="active">
        <el-tab-pane
          label="资产信息"
          name="first"
        >
          <table class="table">
            <tr>
              <th>总资产</th>
              <td>{{zcxx.assgro || '--'}}</td>
              <th>负债总额</th>
              <td>{{zcxx.liagro || '--'}}</td>
              <th>营业总收入</th>
              <td>{{zcxx.vendinc || '--'}}</td>
            </tr>
            <tr>
              <th>净利润</th>
              <td>{{zcxx.netinc || '--'}}</td>
              <th>所有者权益合计</th>
              <td>{{zcxx.totequ || '--'}}</td>
              <th>主营收入</th>
              <td>{{zcxx.maibusinc || '--'}}</td>
            </tr>
            <tr>
              <th>利润总额</th>
              <td>{{zcxx.progro || '--'}}</td>
              <th>纳税总额</th>
              <td>{{zcxx.ratgro || '--'}}</td>
              <th></th>
              <td></td>
            </tr>
          </table>
        </el-tab-pane>
      </el-tabs>
      <el-tabs v-model="active">
        <el-tab-pane
          label="对外提供担保信息"
          name="first"
        >
          <el-table
            :data="outDbList"
            style="width: 100%"
            :header-cell-style="{background:'#f2f9fe'}"
          >
            <el-table-column
              type="index"
              label="序号"
              width="100"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="more"
              label="债权人"
              width="200"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="mortgagor"
              label="债务人"
              width="200"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="priclaseckind"
              label="主债权种类"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="priclasecam"
              label="主债权数额"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="pefperform"
              label="债务履行期限起"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="pefperto"
              label="债务履行期限止"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="gatype"
              label="保证方式"
              align="center"
            ></el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <el-tabs v-model="active">
        <el-tab-pane
          label="社保信息"
          name="first"
        >
          <table class="table sbxx">
            <tr>
              <th>险种</th>
              <th>参保人数</th>
              <th>缴费基数</th>
              <th>实际缴费基数</th>
              <th>累计欠缴金额</th>
            </tr>
            <tr>
              <td>城镇职工基本养老保险</td>
              <td>{{sbxx.so110 || '--'}}</td>
              <td>{{sbxx.totalwagesso110 || '--'}}</td>
              <td>{{sbxx.totalpaymentso110 || '--'}}</td>
              <td>{{sbxx.unpaidsocialinsso110 || '--'}}</td>
            </tr>
            <tr>
              <td>失业保险</td>
              <td>{{sbxx.so210 || '--'}}</td>
              <td>{{sbxx.totalwagesso210 || '--'}}</td>
              <td>{{sbxx.totalpaymentso210 || '--'}}</td>
              <td>{{sbxx.unpaidsocialinsso210 || '--'}}</td>
            </tr>
            <tr>
              <td>职工基本医疗保险</td>
              <td>{{sbxx.so310 || '--'}}</td>
              <td>{{sbxx.totalwagesso310 || '--'}}</td>
              <td>{{sbxx.totalpaymentso310 || '--'}}</td>
              <td>{{sbxx.unpaidsocialinsso310 || '--'}}</td>
            </tr>
            <tr>
              <td>工伤保险</td>
              <td>{{sbxx.so410 || '--'}}</td>
              <td>{{sbxx.totalwagesso410 || '--'}}</td>
              <td>{{sbxx.totalpaymentso410 || '--'}}</td>
              <td>{{sbxx.unpaidsocialinsso410 || '--'}}</td>
            </tr>
            <tr>
              <td>生育保险</td>
              <td>{{sbxx.so510 || '--'}}</td>
              <td>{{sbxx.totalwagesso510 || '--'}}</td>
              <td>{{sbxx.totalpaymentso510 || '--'}}</td>
              <td>{{sbxx.unpaidsocialinsso510 || '--'}}</td>
            </tr>
          </table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { getQynb, getQynbnf } from '@/api/portay'
export default {
  props: ['comInfo'],
  data() {
    return {
      active: 'first',
      year: '',
      yearOptions: [],
      jcxx: {},
      zcxx: {},
      outDbList: [],
      sbxx: {},
      loading: false,
    }
  },
  created() {
    // this.year = (new Date().getFullYear() - 1);
    // for (let i = 0; i <= 5; i++) {
    //   this.yearOptions.push({ label: (this.year - i), value: (this.year - i) })
    // }
    //this.onload();
  },
  watch: {
    comInfo: {
      handler(newVal, oldVal) {
        if (newVal.shtyxydm) {
          this.getQynbnf()
        }
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {},
  methods: {
    //判断是否为统一社会信用代码
    handelCode(val) {
      if (!val) return '统一社会信用代码'
      if (val.length == 18 && val.startsWith('91')) {
        return '统一社会信用代码'
      } else if (val.length == 7) {
        return '企业编号'
      } else {
        return '工商注册号'
      }
    },
    //查询年份
    getQynbnf() {
      getQynbnf({ TYSHXYDM: this.comInfo.shtyxydm }).then((res) => {
        if (res.status) {
          let newArr = res.data.sort((a, b) => b - a)
          this.yearOptions = newArr.map((item) => {
            return { label: item + '年', value: item }
          })
          this.year = res.data[0]
          this.$nextTick(() => {
            this.onload(res.data[0])
          })
        }
      })
    },
    //查询数据
    onload(e) {
      this.loading = true
      getQynb({ TYSHXYDM: this.comInfo.shtyxydm, year: e || this.year }).then(
        (res) => {
          if (res.status) {
            this.loading = false
            let data = res.data
            let { acxx, dbxx, jcxx, sbxx } = data
            this.jcxx = jcxx[0] || {}
            this.zcxx = acxx[0] || {}
            this.outDbList = dbxx || []
            this.sbxx = sbxx[0] || {}
          }
        }
      )
    },
  },
}
</script>

<style scoped="scoped" lang="scss">
.containter {
  width: 100%;
  .basicInfo {
    background: #fff;
    border-radius: 10px;
    width: 100%;
    padding: 12px 174px 12px 24px;
    margin-top: 20px;
    h2 {
      text-align: center;
    }
    .date {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .table {
      width: 100%;
      border-collapse: collapse;
      th,
      td {
        height: 56px;
        border: #ccc solid 1px;
      }
      th {
        width: 238px;
        background-color: #f2f9fe;
      }
      td {
        padding-left: 10px;
        text-align: left;
      }
    }
    .sbxx {
      td {
        padding-left: 0;
        text-align: center;
      }
    }
  }
}
</style>